<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title></title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        ul,li{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        #box{
            width: 520px;
            height: 280px;
            margin: 100px auto;
            position: relative;
        }
        #box .list li{
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #box .list li.current{
            display: block;
        }
        #box .count{
            position: absolute;
            left: 10px;
            bottom: 10px;
        }
        #box .count li{
            float: left;
            width: 20px;
            height: 20px;
            /*border-radius: 50%;*/
            background-color: #000;
            text-align: center;
            line-height: 20px;
            margin-left: 10px;
            color: #fff;
            opacity: 0.8;
            cursor: pointer;
        }
        #box .count li.current{
            background-color: #f60;
            opacity: 1;
        }
        #box .count2{
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        #box .count2 li{
            float: right;
            width: 25px;
            height: 25px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            margin-right: 5px;
            line-height: 25px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul class="list">
            <li class="current"><img src="../img/01.jpg" alt=""></li>
            <li><img src="../img/02.jpg" alt=""></li>
            <li><img src="../img/03.jpg" alt=""></li>
            <li><img src="../img/04.jpg" alt=""></li>
            <li><img src="../img/05.jpg" alt=""></li>
        </ul>
        <ul class="count">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul class="count2">
            <li class="right">&gt;</li>
            <li class="left">&lt;</li>
        </ul>
    </div>
</body>
</html>
<script>

    var box=$('#box');
    var aLi=$('.list li');
    var aNum=$('.count li');

    var current=0;
    var timer=null;

    // $(function(){
        
        // 自动图片切换
        timer=setInterval(autoPlay,1000);
        function autoPlay(){
            current ++;
            // $(aLi).eq(current).show().siblings().hide();
            if(current>=aLi.length){
                current=0;
            }
            show(current);
        }

        // 处理图片显示/隐藏
        function show(current){
            $(aLi).eq(current).addClass('current').siblings().removeClass('current');
            $(aNum).eq(current).addClass('current').siblings().removeClass('current');
        };

        // 点击数字切换图片
        aNum.hover(function(index){
            // console.log($(this).index());
            show($(this).index());
            clearInterval(timer);
        },function(){
            current=$(this).index();
            timer=setInterval(autoPlay,1000);
        });

        //按钮切换图片
        $('.left').click(function(){
            clearInterval(timer);
            current --;
            show(current);
            if(current>=aLi.length){
                current=0;
            }if(current<0){
                current=aLi.length-1;
            }
            // console.log('1');
        });

        $('.right').click(function(){
            clearInterval(timer);

            show(current);
            current ++;
            if(current>aLi.length-1){
                console.log(current);
                current=0;
            }if(current<0){
                current=aLi.length-1;
            }         
        });



        // 鼠标进入让图片停止切换，鼠标拿开继续切换
        box.hover(function(){
            clearInterval(timer);
        },function(){
            timer=setInterval(autoPlay,1000);
        });



</script>